<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="companyId" test="companyName" v-on:confirm="filterEvent($event,'ownerId')"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
    </el-form>
    <el-table :data="list" @selection-change="selStockEvent">
      <el-table-column type="expand" label="详情">
      </el-table-column>
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" label="序号"/>
      <el-table-column label="标题" prop="title">
        <template slot-scope="scope">
          {{scope.row.title?scope.row.title.split('&&')[0]:'无'}}
        </template>
      </el-table-column>
      <el-table-column label="属性" prop="props">
        <template slot-scope="scope">
          {{scope.row.title?scope.row.title.split('&&')[1]:'无'}}
        </template>
      </el-table-column>
      <el-table-column label="单位" prop="data.unit"></el-table-column>
      <el-table-column label="sn" prop="sn"></el-table-column>
      <el-table-column label="所属" prop="data.companyName"></el-table-column>
      <el-table-column label="实际库存" prop="realityStock"></el-table-column>
      <el-table-column label="虚拟库存" prop="virtualStock"></el-table-column>
      <!--<el-table-column label="操作">-->
        <!--<template slot-scope="scope">-->

        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>

    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <div>
      <batch-tool :titleList="titleList" v-on:operateEvent="operateEvent"></batch-tool>
    </div>
    <div class="progressBox" v-if="listLength >0">
      <!--<el-progress class="progress" type="circle" :percentage='30'>操作者</el-progress>-->
      <el-progress class="progress" type="circle" :percentage="(listLength-selProductSkus.length)/listLength *100"/>
      <el-row>操作中……</el-row>
    </div>
    <el-dialog title="生成入库单" :visible.sync="inboundDialog" width="80%" >
      <inbound :itemlist="itemList" :companyId="filterObj.companyId" v-on:success="getStockList(0,filterObj)"></inbound>
    </el-dialog>
    <el-dialog title="生成出库单" :visible.sync="outboundDialog" width="80%" >
      <outbound :itemlist="itemList" :companyId="filterObj.companyId" v-on:success="getStockList(0,filterObj)"></outbound>
    </el-dialog>

  </section>
</template>

<script>
  import outbound from '../outbound/newOutbound'
  import inbound from '../inbound/newInbound'
  import batchTool from '@/common/batchTool'
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "stockList",
    components:{filterTool,searchTool,batchTool,inbound,outbound},
    props:['currWarehouse'],
    data() {
      return {
        totalPage:0,
        filterObj:{},
        list:[],
        selStock:[],
        titleList:['生成入库单','生成出库单'],
        inboundDialog:false,
        outboundDialog:false,
        itemList:[],
        listLength:0,
      }
    },
    created(){
      console.log('库存列表-----------',this.currWarehouse)
      if(this.currWarehouse.id){
        this.getStockList()//加载产品类型列表
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getStockList(val-1,this.filterObj)
      },
      getStockList(pageNo,filterObj){
        this.fetch({name:"getStockList",data:{warehouseId:this.department.id,page:pageNo?pageNo:0,...filterObj}})
          .then(res=>{
            console.log('库存列表---------',res)
            this.list=res.content
            this.totalPage=res.totalPages
            this.inboundDialog=false
            this.outboundDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      filterEvent(e,objK){
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        this.getStockList(0,tmp)//筛选出库单列表
      },
      searchProductEvent(e){
        this.filterObj.key=e
        this.getStockList(0,this.filterObj)
      },
      selStockEvent(e){
        console.log('多选库存事件----',e)
        this.selStock=e
        e.forEach(g=>{
          // this.selStock.push({id:g.id,specs:g.productSpecs,name:g.name})
        })
      },
      operateEvent(e){
        if(this.selStock === null ||this.selStock.length <=0){
          this.$message({type:'error',message:'请至少选择一个库存！'})
          return
        }
        console.log('看一下选中的----------',this.selStock)
        if(e === 0){//入库单
          this.itemList=[{specs:this.selStock}]
          this.inboundDialog=true
        }else if(e === 1){//出库单
          //要判断是否有库存
          this.judgeStock(this.selStock)
        }
      },
      judgeStock(array){
        console.log('判断下有没有库存可以出---virtualStock---',array)
        let itemsAble=[]
        let itemsUnable=[]
        for(let i=0;i<array.length;i++){
          let a=array[i]
          if(!a.minus && a.virtualStock <= 0){
            itemsUnable.push(a)
          }else {
            itemsAble.push(a)
          }
        }
        if(itemsAble.length >0){
          this.itemList=[{specs:itemsAble}]
          this.outboundDialog=true
        }else {
          this.$message({type:'error',message:'暂无可出库的库存，请确认！'})
        }
        if(itemsUnable.length>0){
          this.$message({type:'info',message:'已过滤不能出库的库存。'})
        }
      },
      getInventory(pageNo,filterObj){
        console.log('筛选参数----------',filterObj)
        this.inboundDialog=false
        this.outboundDialog=false
      },
    }
  }
</script>

<style scoped>

</style>
